diff options
Diffstat (limited to 'src/pages/blog/[...slug].astro')
| -rw-r--r-- | src/pages/blog/[...slug].astro | 45 |
1 files changed, 32 insertions, 13 deletions
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 41b0f5c..d12ff05 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -2,6 +2,7 @@ import { type CollectionEntry, getCollection } from "astro:content"; import Comments from "../../components/Comments.astro"; import Layout from "../../layouts/BaseLayout.astro"; +import blogPostSchema from "../../utils/schemas/blogPostSchema"; import dayjs from "dayjs"; type Props = CollectionEntry<"blog">; @@ -18,37 +19,55 @@ export async function getStaticPaths() { } const post = Astro.props; + const { Content, remarkPluginFrontmatter } = await post.render(); -const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"); + +const description = post.data.description; +const isBasedOn = post.data.basedOn; +const lang = post.data.lang; +const preview = `/images/preview/${post.slug}.png`; +const slug = post.slug; +const title = post.data.title; + +const dateModified = post.data.dateModified?.toISOString(); +const datePublished = post.data.datePublished.toISOString(); +const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY"); + +const schema = blogPostSchema({ + siteUrl: new URL("/", Astro.site).toString(), + dateModified, + datePublished, + description, + isBasedOn, + lang, + preview, + slug, + title, +}); --- <style lang="scss"> - @import "../../scss/_variables.scss"; + @use "../../scss/variables" as *; p { opacity: 0.5; } </style> -<Layout description={post.data.description} title={post.data.title}> +<Layout title={title} description={description} preview={preview} lang={lang} schema={schema}> <article> - <section> + <header> + <h1>{title}</h1> + <p> <small> - <a href="/">< Home</a> - <span> • </span> Posted - <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> - by {post.data.author} + <time datetime={datePublished} lang="en">{formattedDate}</time> <span> • </span> <span>{remarkPluginFrontmatter.minutesRead}</span> </small> </p> - </section> - - <section> - <h1>{post.data.title}</h1> - </section> + </header> <section> <Content /> |